<template>
	<view  :class="type == 3 ? 'popup2' : ''" class="popup">
		<view class="title" v-if="type != 3">请选择支付方式</view>
		<template v-else>
			<view class="title" >支付</view>
			<view style="font-size:24rpx; color: #562466; text-align:left; margin-top:30rpx;">为什么要支付</view>
			<view style="font-size:20rpx; color: #969696; text-align:left; margin-top:30rpx;">
				为过滤非诚意用户，避免微商，酒托，广告等骚扰，打造纯净私密的交友空间，保证产品持续稳定运营。需支付一定费用，成为会员
			</view>
		</template>
		<view class="alipay" @click="buy(1)">
			<image src="./img/ic_alipay2.png"></image>
			<text>支付宝支付</text>
			<view class="money">{{money}}</view>
		</view>
		<view class="wechat" @click="buy(2)">
			<image src="./img/ic_wechat2.png"></image>
			<text>微信支付</text>
			<view class="money">{{money}}</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				
			}
		},
		props:{
			type:{
				type: Number,
				default: 1
			},
			money:{
				type: Number,
				default: 0
			},
			projectId:{
				type: Number,
				default: 0
			}
			
		},
		methods: {
			async buy(type){
				let url = "/api/aliPayVersion3/transactionsH5?type="+this.type+"&projectId="+this.projectId
				if(type == 2){
					url = "/api/wechatVersion3/rechargeH5?type="+this.type+"&projectId="+this.projectId
				}
				let res = await this.$c.post(url)
				if(res.code != 0){
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
				const webview = plus.webview.create('', 'custom-webview');
				webview.loadURL(res.data.payUrl, {
					'Referer': 'http://api.ptszyxx.com://'
				});
				// app.globalData.webviewUrl = res.data.payUrl
				// console.log("app.globalData.webviewUrl"+ app.globalData.webviewUrl);
				// uni.navigateTo({ url: '/pages/webview/webview'});
				// console.log(res.data)
				// this.$emit("pay_submit",{});
			}
		}
	}
</script>

<style scoped lang="scss">
.popup{
	width:70vw;
	height: 460rpx;
	background-color: rgba(0,0,0,0.8);
	padding: 40rpx;
	border-radius: 40rpx;
	text-align: center;
	.title{
		font-size: 36rpx;
		margin-bottom:30rpx;
		color: $uni-color-primary;
	}
	.alipay{
		margin-top:60rpx;
		background-color: rgb(71, 169, 246);
		border-radius: 30rpx;
		padding:10rpx 50rpx;
		color:#fff;
		height:80rpx;
		text{
			position:absolute;
			left: 180rpx;
			transform: translateY(20rpx);
		}
		image{
			position:absolute;
			left: 60rpx;
		}
		.money{
			transform: translateY(20rpx);
		}
	}
	.wechat{
		margin-top:60rpx;
		background-color: rgb(101, 212, 64);
		border-radius: 30rpx;
		padding:10rpx 50rpx;
		color:#fff;
		height:80rpx;
		text{
			position:absolute;
			left: 180rpx;
			transform: translateY(20rpx);
		}
		image{
			position:absolute;
			left: 60rpx;
		}
		.money{
			transform: translateY(20rpx);
		}
	}
	.money{
		position:absolute; right:60rpx;
		color:#fff;
	}
	image{
		width:80rpx;
		height:80rpx;
	}
}

.popup2{
	width:100vw !important;
	padding-left:5% !important;
	padding-right:5% !important;
	transform: translateY(50rpx);
}
</style>
